const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // .js  .json
    entry: "./index.js",
    output: {
        path: __dirname + "/build",
        filename: "main.js"
    },
    // 打包模式
    // production   development  none
    mode: "development",
    // 解析器
    module: {
        // 规则
        rules: [
            {
                test: /\.css$/,
                // 要使用的解析器
                // use (多个插件用数组，单个用字符串)
                use: ['style-loader', 'css-loader']
            },
            // 解析图片
            {
                test: /\.(png|jpg|gif)$/,
                // use: 'file-loader'
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            // 图片的名称
                            // [path]  路径
                            // [name]  文件的名称
                            // [ext]   后缀名
                            name: '[path][name].[ext]'
                        },
                    },
                ],
            },
        ]
    },
    // 插件  所有的插件都需要实例
    plugins: [
        // HtmlWebpackPlugin  打包过后自动生成html
        new HtmlWebpackPlugin({
            // 依赖模板
            template: "./public/index.html"
        })
    ]
}

// 尝试解析
// sass  less
// mp3  mp4
// icon